<?php
$locations = '';
$count = count($flats);
foreach ($flats as $i => $flat) {
    if (!empty($flat->lat) && (!empty($flat->lng))) {
        $locations .= "['" . $flat->сity->url . "/" . $flat->id . "', " . $flat->lat . ", " . $flat->lng . ", '" . ImageResizer::getThumb($flat->img0, 'data/imgs/flat/' . $flat->id . '/', $flat->img0, 100, 74) . "', '" . $flat->street . " " . $flat->home . "', '" . $flat->getTypeFlatText() . "', '" . $flat->guests . "', '" . $flat->price . "'], ";
    }
}
$locations = substr($locations, 0, -2);
?>

<div class="map-wrapper">
    <div class="map">
        <div id="map" class="map-inner hidden-phone"></div><!-- /.map-inner -->
        <?php $this->widget('application.widgets.front.SeachFormWidget', array()); ?>        
    </div><!-- /.map -->
</div><!-- /.map-wrapper -->

<script language="JavaScript">
    $(document).ready(function() {
        InitMap();
    });

    function LoadMap() {
        var locations = new Array(<?= $locations; ?>);
        var markers = new Array();
        var mapOptions = {
            center: new google.maps.LatLng(<?= !empty($geo->lat) ? $geo->lat : $settingsMap->lat; ?>, <?= !empty($geo->lng) ? $geo->lng : $settingsMap->lng; ?>),
            zoom: <?= $settingsMap->zoom; ?>,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        };
        var map = new google.maps.Map(document.getElementById('map'), mapOptions);
        $.each(locations, function(index, location) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(location[1], location[2]),
                map: map,
                icon: 'http://html.realia.byaviators.com/assets/img/marker-transparent.png'
            });
            var myOptions = {
                content: '<div class="infobox">\n\
<div class="image"><a rel="nofollow" href="' + location[0] + '">' + location[3] + '</a></div>\n\
<div class="title"><a rel="nofollow" href="' + location[0] + '">' + location[4] + '</a></div>\n\
<div class="area"><span class="key">Тип&nbsp;:&nbsp;</span><span class="value">&nbsp;' + location[5] + '</div>\n\
<div class="area"><span class="key">Гостей&nbsp;:&nbsp;</span><span class="value">&nbsp;' + location[6] + '</div>\n\
<div class="price">Цена : ' + location[7] + ' грн.</div>\n\
<div class="link"><a rel="nofollow" href="' + location[0] + '">Смотреть</a></div>\n\
</div>',
                disableAutoPan: false,
                maxWidth: 0,
                pixelOffset: new google.maps.Size(-146, -190),
                zIndex: null,
                closeBoxURL: "",
                infoBoxClearance: new google.maps.Size(1, 1),
                position: new google.maps.LatLng(location[0], location[1]),
                isHidden: false,
                pane: "floatPane",
                enableEventPropagation: false
            };
            marker.infobox = new InfoBox(myOptions);
            marker.infobox.isOpen = false;
            var myOptions = {
                draggable: true,
                content: '<div class="marker"><div class="marker-inner"></div></div>',
                disableAutoPan: true,
                pixelOffset: new google.maps.Size(-21, -58),
                position: new google.maps.LatLng(location[0], location[1]),
                closeBoxURL: "",
                isHidden: false,
                // pane: "mapPane",
                enableEventPropagation: true
            };
            marker.marker = new InfoBox(myOptions);
            marker.marker.open(map, marker);
            markers.push(marker);
            google.maps.event.addListener(marker, "click", function(e) {
                var curMarker = this;
                $.each(markers, function(index, marker) {
                    // if marker is not the clicked marker, close the marker
                    if (marker !== curMarker) {
                        marker.infobox.close();
                        marker.infobox.isOpen = false;
                    }
                });
                if (curMarker.infobox.isOpen === false) {
                    curMarker.infobox.open(map, this);
                    curMarker.infobox.isOpen = true;
                    map.panTo(curMarker.getPosition());
                } else {
                    curMarker.infobox.close();
                    curMarker.infobox.isOpen = false;
                }

            });
        });
    }

    function InitMap() {
        google.maps.event.addDomListener(window, 'load', LoadMap);
    }

</script>

